 * {
     margin: 0;
     padding: 0;
 }
 
 li {
     list-style: none;
 }
 
 html,
 body {
     position: relative;
     height: 100%;
 }
 
 body {
     background: #eee;
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
     font-size: 14px;
     color: #000;
     margin: 0;
     padding: 0;
 }
 
 #swiper-button-prevs {
     position: absolute;
     left: 250px;
     color: pink;
     &:hover {
         background: blue;
     }
 }
 
 #swiper-button-nexts {
     color: pink;
     &:hover {
         background: blue;
     }
 }
 
 .swiper-containers {
     width: 100%;
     height: 100%;
 }
 
 .swiper-container {
     width: 100%;
     height: 100%;
 }
 
 .swiper-slide {
     background-position: center;
     background-size: cover;
 }
 
 .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
 }
 
 li {
     list-style: none;
 }
 
 a {
     text-decoration: none;
     color: #b0b0b0;
 }
 
 b {
     display: block;
     float: left;
     font-size: 33px;
     padding-left: 7px;
 }
 
 .header {
     overflow: hidden;
     .logo-head {
         width: 100%;
         height: 120px;
         margin: 0 auto;
         background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bb3c06a430689ba2357dd7d1fbfa6bab.jpg?w=5120&h=240)no-repeat;
         position: absolute;
         top: 0;
         left: 0;
         background-position: 50%;
         background-size: auto 120px;
         z-index: -9999;
     }
     .nav-wrap {
         width: 100%;
         background: #333;
         .nav {
             width: 1226px;
             height: 40px;
             margin: 0 auto;
             margin-top: 120px;
             background: #333;
             .list-l {
                 width: 855px;
                 height: 40px;
                 float: left;
                 li {
                     font-size: 12px;
                     float: left;
                     line-height: 40px;
                     padding: 0 8px;
                     a {
                         color: #b0b0b0;
                         &:hover {
                             color: #fff;
                         }
                     }
                 }
             }
             .list-r {
                 margin-left: 96px;
                 float: left;
                 li {
                     font-size: 12px;
                     float: left;
                     line-height: 40px;
                     padding: 0 6px;
                     .a1 {
                         display: inline-block;
                         width: 120px;
                         height: 40px;
                         background: #424242;
                         text-align: center;
                         &:hover {
                             background: #fff;
                         }
                     }
                     a {
                         color: #b0b0b0;
                         &:hover {
                             color: #f56600;
                         }
                     }
                 }
             }
         }
     }
     .nav-b {
         width: 1226px;
         height: 100px;
         margin: 0 auto;
         .nav-b-l {
             background: url(https://account.xiaomi.com/static/res/349d9c1/account-static/respassport/acc-2014/img/milogo.png) no-repeat;
             width: 55px;
             height: 55px;
             margin-top: 22.5px;
             float: left;
         }
         ul {
             float: left;
             width: 666px;
             height: 100px;
             margin-left: 189px;
             li {
                 float: left;
                 line-height: 100px;
                 font-size: 16px;
                 a {
                     color: #333;
                     padding: 26px 10px 38px;
                     &:hover {
                         color: #f56600;
                     }
                 }
             }
         }
         .nav-b-r {
             float: left;
             .ipt1 {
                 border: 1px solid pink;
                 width: 243px;
                 height: 48px;
                 margin-top: 26px;
                 float: left;
                 text-indent: 10px;
                 outline: none;
             }
             .ipt2 {
                 float: left;
                 border: 1px solid pink;
                 width: 50px;
                 height: 50px;
                 margin-top: 26px;
                 background: none;
                 border-left: none;
                 outline: none;
                 cursor: pointer;
                 &:hover {
                     background: #f56600;
                     color: #fff;
                 }
             }
         }
     }
 }
 
 .banner {
     margin: 0 auto;
     width: 1226px;
     min-height: 600px;
     &:hover {
         cursor: pointer;
     }
     .banner-t {
         margin: 0 auto;
         width: 1226px;
         height: 460px;
         background: pink;
         position: relative;
         ul {
             position: absolute;
             top: 0;
             left: 0;
             z-index: 100;
             width: 234px;
             height: 420px;
             background: rgba(105, 101, 101, .6);
             padding: 20px 0;
             li {
                 padding-left: 30px;
                 height: 42px;
                 font-size: 14px;
                 line-height: 42px;
                 cursor: pointer;
                 &:hover {
                     background: #f56600;
                 }
                 span {
                     display: block;
                     float: right;
                     font-size: 20px;
                     padding-right: 20px;
                 }
                 a {
                     color: #fff;
                 }
             }
         }
     }
     .banner-b {
         width: 1226px;
         height: 170px;
         margin-top: 14px;
         margin-bottom: 20px;
         .banner-b-l {
             ul {
                 width: 234px;
                 height: 170px;
                 float: left;
                 background: #5f5750;
                 li {
                     width: 76px;
                     height: 82px;
                     float: left;
                     text-align: center;
                     line-height: 82px;
                     a {
                         &:hover {
                             color: #fff;
                         }
                     }
                 }
             }
         }
         .banner-b-r {
             ul {
                 width: 978px;
                 height: 170px;
                 margin-left: 14px;
                 float: left;
                 li {
                     width: 316px;
                     height: 170px;
                     float: left;
                     img {
                         width: 316px;
                         height: 170px;
                     }
                 }
                 .teshu {
                     margin: 0 15px;
                 }
             }
         }
     }
 }
 
 .main-wrap {
     background: #f5f5f5;
 }
 
 .main {
     width: 1226px;
     height: 399px;
     margin: 0 auto;
     .main-t {
         width: 1226px;
         height: 58px;
         h2 {
             float: left;
             line-height: 58px;
             font-weight: 200;
             font-size: 22px;
             color: #333;
         }
         p {
             float: right;
             font-size: 22px;
             span {
                 display: inline-block;
                 width: 34px;
                 height: 22px;
                 border: 1px solid #666;
                 margin-top: 23px;
                 text-align: center;
                 line-height: 22px;
                 cursor: pointer;
             }
         }
     }
     .main-b {
         width: 1226px;
         height: 341px;
         text-align: center;
         .main-b-l {
             float: left;
             width: 234px;
             height: 339px;
             background: #f1eded;
             h4 {
                 font-size: 21px;
                 color: #ef3a3b;
                 padding-top: 15px;
                 font-weight: normal;
             }
             img {
                 margin: 25px auto;
             }
             p {
                 color: rgba(0, 0, 0, .54);
                 font-size: 15px;
                 margin-bottom: 50px;
             }
             span {
                 width: 46px;
                 height: 46px;
                 background: #605751;
                 color: #fff;
                 font-size: 24px;
                 line-height: 46px;
                 float: left;
                 margin-left: 15px;
             }
         }
         .main-b-r {
             margin-left: 14px;
             float: left;
             width: 978px;
             height: 339px;
             img {
                 width: 160px;
                 margin-left: 20px;
                 cursor: pointer;
             }
             a {
                 color: #ef3a3b;
             }
         }
     }
 }
 
 .web {
     .web-t {
         img {
             width: 1226px;
             height: 120px;
             margin: 0 auto;
             margin-top: 40px;
             display: block;
         }
     }
     .web-b {
         width: 1226px;
         height: 686px;
         margin: 0 auto;
         .web-b-t {
             width: 1226px;
             height: 58px;
             h2 {
                 font-size: 22px;
                 font-weight: 200;
                 line-height: 58px;
                 color: #333;
                 float: left;
             }
             p {
                 &:hover {
                     color: #f56600;
                     cursor: pointer;
                 }
                 float: right;
                 line-height: 58px;
             }
         }
         .web-b-b {
             .web-b-b-l {
                 float: left;
                 img {
                     width: 234px;
                     height: 614px;
                 }
             }
             .web-b-b-r {
                 width: 992px;
                 height: 614px;
                 float: left;
                 transform-style: preserve-3d;
                 perspective: 1000px;
                 li {
                     &:hover {
                         cursor: pointer;
                         transform: translate3d(0, 0, 5px);
                     }
                     padding: 20px 0;
                     float: left;
                     width: 234px;
                     height: 260px;
                     background: pink;
                     text-align: center;
                     margin-left: 14px;
                     margin-bottom: 13px;
                     h3 {
                         font-size: 14px;
                         font-weight: 400;
                         color: #333;
                         margin-top: 14px;
                     }
                     p {
                         font-size: 12px;
                         color: #b0b0b0;
                         margin: 14px 0;
                     }
                     span {
                         color: red;
                         font-size: 12px;
                     }
                     img {
                         width: 160px;
                         height: 160px;
                     }
                 }
             }
         }
     }
 }
 
 .bottom {
     width: 1226px;
     margin: 0 auto;
     margin-top: 20px;
     .bottom-t {
         width: 1226px;
         height: 79px;
         border-bottom: 1px solid #666;
         ul {
             display: flex;
             justify-content: space-around;
             li {
                 float: left;
                 font-size: 16px;
                 line-height: 79px;
                 a {
                     color: #616161;
                     &:hover {
                         color: #f56600;
                     }
                 }
             }
         }
     }
     .bottom-b {
         width: 1226px;
         height: 170px;
         padding-bottom: 30px;
         .bottom-b-l {
             float: left;
             ul {
                 width: 160px;
                 float: left;
                 li {
                     a {
                         color: #757575;
                         &:hover {
                             color: #ff6700;
                         }
                     }
                 }
                 h4 {
                     margin: 30px 0;
                     font-size: 14px;
                     color: #424242;
                     font-weight: normal;
                 }
             }
         }
         .bottom-b-r {
             float: right;
             width: 251px;
             h3 {
                 font-size: 22px;
                 color: #ff6700;
                 padding: 0 53px;
                 margin-top: 30px;
             }
             p {
                 font-size: 12px;
                 padding: 10px 53px;
                 color: #616161;
             }
             span {
                 display: block;
                 width: 118px;
                 height: 28px;
                 border: 1px solid #ff6700;
                 text-align: center;
                 line-height: 28px;
                 font-size: 12px;
                 margin-left: 53px;
                 margin-bottom: 10px;
                 cursor: pointer;
                 &:hover {
                     background: #ff6700;
                 }
             }
             img {
                 margin-left: 40px;
             }
         }
     }
 }